<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Vue -->
  <script src="../js/vue.js"></script>
  <style>
    * {
      margin-top: 20px;
    }

    .demo1 {
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: plum;
    }

    .demo2 {
      margin: 10px;
    }

    #box1 {
      padding: 20px;
      background-color: skyblue;
      cursor: pointer;
    }

    #box2 {
      padding: 20px;
      background-color: white;
    }

    .list {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      overflow: auto;
    }

    li {
      height: 100px;
    }
  </style>
  <title>事件装饰符</title>
</head>

<body>
  <!-- 
    Vue中的事件修饰符:
      1.prevent:阻止默认事件
      2.stop:阻止事件冒泡
      3.once:事件只触发一次
      4.capture:使用事件的捕获模式
      5.self:只有event.target是当前操作的元素时才触发事件
      6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕
    修饰符可以连续写,比如这么用:@click.prevent.once="showInfo"
   -->
  <!-- 创建容器 -->
  <div id="root">
    <h2>欢迎来到{{city.toUpperCase()}}打工{{Date.now()}}</h2>
    <a href="http://www.baidu.com" @click="showInfo">点我提示</a>

    <!-- Vue事件装饰器:prevent阻止默认事件 -->
    <a href="http://www.mi.com" @click.prevent="showInfo1">点我提示</a>

    <!-- Vue事件装饰器:stop阻止事件冒泡 -->
    <div class="demo1" v-on:click="showInfo">
      <button @click.stop="showInfo1">点击提示</button>
    </div>

    <!-- Vue事件装饰器:once事件只触发一次 -->
    <button class="demo2" @click.once="showInfo">点击提示</button>

    <!-- Vue事件装饰器:capture使用事件捕获模式 -->
    <div id="box1" @click.capture="showMsg(1)">
      div1
      <div id="box2" @click="showMsg(2)">
        div2
      </div>
    </div>

    <!-- Vue事件装饰器:只有event.target是当前操作的元素时才触发事件 -->
    <div class="demo1" @click.self="showInfo">
      <button @click="showInfo">点我提示</button>
    </div>

    <!-- Vue事件装饰器:passive事件默认立即执行,无需等待事件回调执行完毕 -->
    <!-- scroll是滚动条滚动, passive没有影响-->
    <!-- wheel是鼠标滚动,passive有影响 -->
    <ul @wheel.passive="demo" class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>


  <script>
    Vue.config.productionTip = false

    // 创建一个实例
    new Vue({
      el: '#root',
      data() {
        return {
          city: 'guangdong'
        }
      },
      methods: {
        showInfo(e) {
          // e.preventDefault()//阻止默认跳转
          // e.stopPropagation()//阻止冒泡
          console.log(e.target)
          alert('同学你好')
        },
        showInfo1(e) {
          alert('你好同学')
        },
        showMsg(num) {
          console.log(num)
          alert('事件' + num)
        },
        demo() {
          for (let i = 0; i < 100000; i++) {
            console.log('#')
          }
          console.log('累了')
        }
      }
    })
  </script>
</body>

</html>